<template>
  <div>
    <el-container id="add">
      <el-header  class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">车辆类型</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main style="overflow-y:auto">
        <div class="inside-main-box">
          <el-row class="inside-main" style="height: 46px">
            <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="分类名称" size="small">
                <el-input v-model="form.type_name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectForm">查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="clear()">重置</el-button>
              <el-button size="small" icon="plus" class="add-but" @click="addDialog = true">新增</el-button>
            </el-col>
          </el-row>
        </div>
        <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
        </div>
        <div style="background: #fff">
          <el-table :data="tableData.rows" style="width: 100%" height="600" row-key="id"
                    :default-expand-all="tableData.isExpandAll"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="center" prop="id" label="序号" width="60" type="index"/>
            <el-table-column align="center" prop="type_name" label="分类名称" />
            <el-table-column align="center" prop="creator" label="创建人" />
            <el-table-column align="center" prop="create_time" label="创建时间"
               :formatter="function(row,column){ if(row.create_time){ return $moment(row.create_time).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}">
            </el-table-column>
            <el-table-column align="center" prop="updater" label="修改人" />
            <el-table-column align="center" prop="update_time" label="修改时间"
              :formatter="function(row,column){ if(row.update_time){ return $moment(row.update_time).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="210">
              <template #default="scope">
                <el-button link type="primary" size="small" icon="plus"
                  @click="addDetail(scope.row)" >新增</el-button>
                <el-button link type="primary" size="small" icon="edit"
                  @click="updateDetail(scope.row)" >修改</el-button>
                <el-button link type="danger" size="small" icon="delete"
                           @click="deleteRow(scope.row.id)">删除</el-button>
              </template>
</el-table-column>
</el-table>
</div>
</el-main>
</el-container>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" title="新增分类" width="40%">
    <div style="width: 80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="type_name">
                <el-input v-model="ruleForm.type_name" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择上级" prop="parent_classification">
              <el-cascader v-model="ruleForm.parent_id" style="color:black" :options="tableData.rows" placeholder="不选是根目录"
                           :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="add"> 确定 </el-button>
          <el-button class="empty-but" @click="addDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog v-model="updateDialog" title="修改分类" width="40%">
    <div style="width: 80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="type_name">
                <el-input v-model="obj.type_name" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择上级" prop="parent_classification">
              <el-cascader v-model="ruleForm.parent_id" style="color:black" :options="tableData.rows"
                           :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="updateAll(obj)"> 修改 </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
</div>
</template>

<script setup>
    import {reactive,ref, onMounted} from "vue";
    import {ElMessage,ElMessageBox } from "element-plus";
    import {handleTree} from '@/utils/tools.js';
    import {  selectvehicleType,AddvehicleType,updatevehicleType,delvehicleType  } from "@/api/BasicAccessAudit";
    onMounted(() => {
      // document.querySelector('#add')['style'].height
      //     = (document.documentElement.clientHeight - 90) + 'px';
        All();
    });
    // 重置
    const clear = () => {
        (form.type_name = ""), All();
    };
    const defaultProps = {
      label:"type_name",
      value:"id",
      children:"children",
      multiple:false,
      checkStrictly:true,
      emitPath: false
    }
    const tableData = reactive({
      flat:{},
      isExpandAll:false,
      refreshTable:true,
      row:[],
      total:0,
    });
    // 新增弹窗 表单校验
    const ruleForm = reactive({
        type_name: "",
        parent_id: 0,
        parent_classification: "-",
    });
    // 根据搜索栏来查询
    const form = reactive({
        type_name: "",
    });
    // 新增
    const add = () => {
      AddvehicleType(ruleForm).then((res) => {
            if (res.code === 200) {
                ElMessage.success("新增成功");
                All();
                addDialog.value = false;
            } else {
                ElMessage.error("新增失败");
            }
        });
    };
    // 查所有
    const All = () => {
      selectvehicleType({}).then((res) => {
        console.log(res.list,'resres')
            res.list.forEach(e=>{
              tableData.flat[e.id] =e;
            })
            tableData.rows = handleTree(res.data,"id","parent_id","children");
        });
    };
    const deleteRow = (index) => {
      ElMessageBox.confirm("确定要删除吗?")
        .then(() => {
          delvehicleType({id:index}).then(res=>{
            All();
          })
        })
    };

    // 修改
    const updateDialog = ref(false);
    let obj = reactive({
        type_name: "",
        parent_id: 0,
        parent_classification: "-",
    });
    const addDetail = (row) =>{
      addDialog.value = true;
      ruleForm.type_name = '';
      ruleForm.parent_id = row.id;
      ruleForm.parent_classification = row.type_name;
      ruleForm.depth = row.depth+1;
    }
    const updateDetail = (row) =>{
      updateDialog.value = true;
      obj.id = row.id;
      obj.type_name = row.type_name;
      obj.parent_id = row.parent_id;
      obj.parent_classification = row.parent_classification;
    }
    const updateAll = (row) => {
      updatevehicleType(row).then((res) => {
            if (res.code == 200) {
                ElMessage.success("修改成功");
                All();
                updateDialog.value = false;
            } else {
                ElMessage.error("修改失败");
            }
        });
    };
    const rules = {
        username: [{
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
        }, {
            // min: 3,
            // max: 10,
            message: "请输入分类名称",
            trigger: "blur",
        }, ],
        region: [{
            required: true,
            message: "请选择上级",
            trigger: "change",
        }, ],
    };
    // 新增弹窗
    const addDialog = ref(false);
    const parenchange = (e) =>{
      ruleForm.parent_classification =tableData.flat[e]?.type_name||"-";
      ruleForm.depth = tableData.flat[e]?.depth+1||1;
    }
    const changeModify = (e) =>{
      obj.parent_classification =tableData.flat[e]?.type_name||"-";
      obj.depth = tableData.flat[e]?.depth+1||1;
    }
    const selectForm = () => {
      selectvehicleType(form).then((res) => {
        res.data.forEach(e=>{
          tableData.flat[e.id] =e;
        })
        tableData.rows = handleTree(res.data,"id","parent_id","children");
      });
      console.log(tableData.rows,'tableData.rows');
    };
    const name = "transportIndex";
    // 时间
    const size = ref("default");
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */
    .inside-header {
      height: 20px;
      display: flex;
      justify-content: left;
      align-items: flex-start;
      background:#f2f4f5
    }
    /* 空心按钮样式 */
    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */
    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }
    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */
    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .el-cascader-menu__wrap {
      max-height: 300px;
      overflow: scroll;
      color:red;
    }
</style>
